<template>

  <el-card style="margin: 20px 0" lang="zh-CN">
    <!--  标签页-->
    <!-- 表格操作 -->
    <div style="float: left; margin: 0 0 15px 0;">
      <el-popconfirm title="确定全部删除吗？" @confirm="deleteNations()">
        <el-button type="danger" size="small" icon="el-icon-delete" :disabled="multipleSelection.length == 0"
                   slot="reference">
          批量删除
        </el-button>
      </el-popconfirm>

      <el-button size="small" type="primary" slot="reference" style="margin-left: 3px"
                 @click="openDialogToInsert()" icon="el-icon-circle-plus-outline">新 增
      </el-button>
      <el-dialog title="新增文档"
                 :visible.sync="dialogInsertVisible"
                 @close="nationFormToInsert={}">
        <el-form :model="nationFormToInsert"
                 style="width: 85%"
                 :rules="nationFormToInsertRules"
                 ref="nationFormToInsert">
          <el-form-item label="简笔画" :label-width="formLabelWidth" prop="image">
            <el-input v-model="nationFormToInsert.image" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="nationFormToInsert.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth" prop="synopsis">
            <el-input  type="textarea"  :rows="4" v-model="nationFormToInsert.synopsis" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
            <el-input v-model="nationFormToInsert.sort" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item style=" margin-left: 300px; ">
            <el-button size="small" @click="dialogInsertVisible = false">取 消</el-button>
            <el-button size="small" type="primary"  @click="insertNation('nationFormToInsert') ">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>


    </div>

    <!--      搜索框-->
    <div style="float: right; margin: 0 0 15px 0;">
      <el-input style="width: 200px" size="small" placeholder="请输入民族" prefix-icon="el-icon-search" v-model="searchName" clearable>
      </el-input>
      <el-button style="margin-left: 5px"size="small" type="primary" @click="searchByName()" @keyup.enter="enterSearch"><i class="el-icon-search"></i> 搜索
      </el-button>
    </div>
    <!--      表格-->

    <el-table stripe :data="allData"
              tooltip-effect="dark"
              style="width: 100%;
              padding: 0"
              @selection-change="handleSelectionChange"
              :header-cell-class-name="headerBg"
              border
              :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
              v-loading="loading">
      <el-table-column type="selection" width="40">
      </el-table-column>
      <el-table-column prop="image" label="简笔画" width="100px" style="padding: 0;margin: 0">
        <template slot-scope="scope">
          <el-image  :src="(scope.row.image)" style="width: 100%; ">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="80">
      </el-table-column>
      <el-table-column prop="synopsis" label="简介">
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="50">
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="170">
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">


          <el-button size="small" type="primary" slot="reference"
                     @click="openDialog(scope.row)">编 辑
          </el-button>

          <el-popconfirm title="确定删除吗？" @confirm="deleteNation(scope.row)">
            <el-button size="small" type="danger" slot="reference" style="margin-left: 3px">
              删 除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>


    <!--    分页-->
    <div style="padding: 10px 0; float: right">
      <el-pagination :page-size="10" layout="total, prev, pager, next, jumper" :total=length
                     @current-change="handleCurrentChange" :current-page="currentPage">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'all',
      /*批量处理的数据*/
      multipleSelection: [],
      /*表格第一行*/
      headerBg: "headerBg",
      /*第一次请求所有数据*/
      allData: [],
      /*搜索栏中的昵称*/
      searchName: '',
      // currentPage:1,
      /*显示的数据*/
      currentDate: [],
      /*当前页数*/
      currentPage: 1,
      /*当前的数据暂时*/
      currentDateTemp: [],
      searchPrams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
      },
      nationFormToInsert:{
        image: '',
        name: '',
        id: '',
        synopsis: '',
        sort: '',
      },

      nationForm: {
        image: '',
        name: '',
        id: '',
        synopsis: '',
        sort: '',

      },


      length: 0,


      dialogInsertVisible:false,
      formLabelWidth: '120px',

      nationFormToInsertRules:{
        image: [
          {required: true, message: '简笔画不能为空'}
        ],
        name: [
          {required: true, message: '标题不能为空'},
        ],
        synopsis: [
          {required: true, message: '简介不能为空'}
        ],
        sort: [
          {required: true, message: '排序不能为空'}
        ],
      },


      loading:false,
    }
  },

  created() {
    this.list();
    this.enterSearch();
  },


  methods: {
    list() {
      this.loading = true;
      this.axios.get("/nation/get-list-by-example", {
        params: this.searchPrams
      }).then(({data}) => {
        if(data.state == 20000){
          this.allData = data.data.list;
          this.length = data.data.totalCount;

        }else{
          this.$message.error(data.message);
        }
        this.loading = false;
      });


    },


    /*当前页变动时候触发的事件*/
    handleCurrentChange(val) {
      /*val就是页号*/
      this.currentPage = val;
      this.searchPrams.pageNum = val;
      this.list();
    },


    /*新增*/
    openDialogToInsert(){
      this.dialogInsertVisible = true;
    },

    /*弹出框*/
    openDialog(val) {
      this.$router.push({path: '/admin/nation/detail',query:val});
    },

    insertNation(nationFormToInsert){
      this.$refs[nationFormToInsert].validate((valid) => {
        if (valid) {
          this.axios.get("/nation/insert-nation",{
            params:this.nationFormToInsert
          })
              .then(({data}) => {
                if (data.state == 20000) {
                  this.dialogFormVisible = false;
                  this.$message({
                    message: '新增成功！',
                    type: 'success'
                  });
                  this.dialogInsertVisible=false;
                  this.$refs.nationFormToInsert.resetFields();
                  this.list();
                } else {
                  this.$message.error(data.message);
                }

              });

        } else {
          this.$message.error("提交失败");
          return false;
        }
      })
    },

    getCurrentData(obj) {

      this.currentDate = obj;
    },

    /*获取单独的评论id*/
    deleteNation(obj) {
      console.log("删除的id:{}",obj)
      this.deleteNations(obj.id);
    },


    /*删除*/
    deleteNations(ids) {
      let temp = this.allData.length;
      if(typeof (ids) == "number"){
        if(temp == 1 && this.searchPrams.pageNum - 1 > 0){
          this.searchPrams.pageNum--;
        }
      }else if(temp == this.multipleSelection.length && this.searchPrams.pageNum - 1 > 0){
        this.searchPrams.pageNum--;
      }
      console.log("id:{}", ids);
      this.axios.get("/nation/delete-by-keys/" + ((typeof (ids) == "number") ? ids : this.multipleSelection)).then(({ data }) => {
        if (data.state == 20000) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.list();
        } else {
          this.$message.error(data.message);
        }

      });
    },

    /*获取批量删除的评论id*/
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach((item) => {
        this.multipleSelection.push(item.id);
      });
    },




    /*根据文章查询评论列表*/
    searchByName() {

      this.searchName = this.searchName.trim();
      if(this.searchName != ''){
        this.searchPrams.name = this.searchName;
        this.list();
        this.searchPrams.name = '';
        this.searchName = '';
      }else{
        this.list();
      }

    },

    //回车搜索
    enterSearch(){
      document.onkeydown = e =>{
        //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
        if (e.keyCode === 13) {
          //回车后执行搜索方法
          this.searchByName();
        }
      }
    }


  },


}
</script>

<style>
.headerBg {
  background: #eee !important;
}

.el-table .el-table__cell {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
}
</style>
